<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 10px solid black;
            box-shadow:
                inset 0 15px 15px -5px hsla(0,0%,100%,.7),
                inset 0 -5px 10px 3px hsla(0,0%,0%,.6),
                0 8px 10px 2px hsla(0,0%,0%,.3);
            border-radius: 50%;
            background-image:
                    repeating-radial-gradient(
                            hsla(320,100%,60%,.6) 0px,
                            hsla(220,100%,60%,0) 60%),
                    repeating-radial-gradient(
                            hsla(330,100%,40%,1) 12%,
                            hsla(320,80%,60%,1) 24px);
            background-size: 60px 60px;
            background-position: center;
            transform: scale(0.66);
            transition: 0.5s cubic-bezier(.32,0,.15,1);
        }
        .on:hover{
            transform: scale(1);
            animation: move 1.5s cubic-bezier(.32,0,.15,1) infinite;
        }
        @keyframes move {
            0% {
                background-size: 60px 60px, 24px 24px;
            }

            50% {
                background-size: 120px 120px, 100px 100px;
            }

            100% {
                background-size: 24px 24px, 140px 140px;
            }
        }
    </style>
</head>
<body>
    <div class="on"></div>
</body>
</html>